<template>
	<div class="novel">
		<div class="novel-content">
			<YRCardTitle :title="queryParams.params.kw?'搜索：'+ queryParams.params.kw:'笑忘书集'"></YRCardTitle>
			<div class="novel-list">
				<div class="data" v-for="(item, index) in articleList" :key="index">
					<Card :padding="0">
						<div class="img" @click="toArticleContent(item)" :style="{ backgroundImage: 'url(' + item.cover + ')' }"></div>
						<div class="content">
							<h1 class="title" @click="toArticleContent(item)"><span v-html="item.title"/></h1>
							<p class="desc"><span v-html="item.description"/></p>
							<div class="art-footer">
								<time class="bot">
									<Icon type="ios-calendar-outline" />
									{{ item.createTime | dateformatDate }}
								</time>
								<span class="sp">/</span>
								<span class="bot">
									<Icon type="ios-eye-outline" style="font-size: 24px;vertical-align:-.185em" />
									{{ item.readNum }}
								</span>
								<span class="sp">/</span>
								<span class="bot">
									<Icon type="ios-chatbubbles-outline" />
									{{ item.commentSum }}
								</span>
							</div>
						</div>
					</Card>
				</div>
				<Spin size="large" fix v-if="spinShow"></Spin>
			</div>
		</div>
		<div class="page">
			<Page :total="total" v-if="queryParams.params.kw" :current="novelPageCurrent" :page-size="queryParams.size" @on-change="searchArticle" />
			<Page :total="total" v-else :current="novelPageCurrent" :page-size="queryParams.size" @on-change="pageArticle" />
		</div>
	</div>
</template>

<script>
import { mapMutations,mapGetters } from 'vuex';
import YRCardTitle from '@/components/common/YRCardTitle.vue';
import { pageArticle, addArticleReadNum } from '@/api/article';
import { searhPageArticle } from '@/api/search';
export default {
	name: 'NovelList',
	components: {
		YRCardTitle
	},
	props: {
		title: String
	},
	data: () => {
		return {
			total: 0,
			queryParams: {
				size: 5,
				params: {
					type: 2,
					kw:undefined
				}
			},
			articleList: [],
			spinShow: false //加载中
		};
	},
	computed: {
		...mapGetters({
			novelPageCurrent: 'base/novelPageCurrent'
		})
	},
	methods: {
		...mapMutations({
			setNovelPageCurrent: 'base/setNovelPageCurrent'
		}),
		initArticle(current){
			if(this.$route.query.kw){
				this.queryParams.params.kw = this.$route.query.kw;
				this.searchArticle();
			}else{
				this.queryParams.params.kw = undefined;
				this.pageArticle(current);
			}
		},
		searchArticle(){
			this.spinShow = true;
			searhPageArticle(this.queryParams).then(res => {
				//平滑滚动到顶部
				window.scrollTo({
					top: 0,
					behavior: 'smooth'
				});
				this.articleList = res.data.records;
				this.total = res.data.total;
				this.spinShow = false;
			});
		},
		pageArticle(current) {
			this.setNovelPageCurrent(current || 1)
			this.queryParams.current = this.novelPageCurrent;
			this.spinShow = true;
			pageArticle(this.queryParams).then(res => {
				//平滑滚动到顶部
				window.scrollTo({
					top: 0,
					behavior: 'smooth'
				});
				this.articleList = res.data.records;
				this.total = res.data.total;
				this.spinShow = false;
			});
		},
		toArticleContent(item) {
			addArticleReadNum(item.id);
			this.$router.push({ path: '/novel/novelContent/', query: { id: item.id } });
		}
	},
	created() {
		this.initArticle(this.novelPageCurrent);
	},
	watch: {
		$route() {
			// 对路由变化作出响应...
			// 解决相同组件间跳转 组件被复用 周期函数失效
			this.initArticle(1);
		}
	}
};
</script>

<style scoped="scoped" lang="stylus">
.ivu-card-bordered
	border none
.novel-content
	position relative
	min-height 65vh
	.novel-list
		position relative
		min-height 65vh
		.data
			padding-bottom 20px
			cursor pointer
			.img
				background-image url('http://lang.sliver.fun/dbblog/20190831/b6575b1e9e464192aa73d385976561e8.jpg')
				background-size cover
				background-position center
				width 100%
				height 180px
			.content
				padding 10px
				padding-bottom 5px
				.title
					font-weight 500
					white-space nowrap
					font-size 22px
					display inline
					vertical-align baseline
					transition background-size 0.3s cubic-bezier(0.215, 0.61, 0.355, 1)
					background-size 100% 150%
				.title:hover
					background-size 100% 100%
					background-image linear-gradient(to top, transparent, transparent 0, #fd0 0, #fd0 7px, transparent 7px)
				.desc
					overflow hidden
					text-overflow ellipsis
					white-space nowrap
					color #888
					padding-top 10px
				.art-footer
					width 100%
					height 35px
					display flex
					align-items center
					.sp
						padding-right 10px
					.bot
						line-height 35px
						color #8f8f8f
						font-size 14px
						padding-right 10px
						cursor pointer
						.ivu-icon
							font-size 1.25rem
.page
	width 100%
	text-align center
</style>
